import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  StatusBar,
  BackHandler,
  Image,
  ImageBackground,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
import {ApplicationImg, CommonImg} from '../../../images';
let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
export default class Background extends Component {
  render() {
    const {img, desc, title, index = 1, appid} = this.props;
    let background =
      index % 2 === 0
        ? ApplicationImg.orageBackground
        : ApplicationImg.blueBackground;
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate('ApplyDetail', {title, appid})
        }>
        <ImageBackground
          source={background}
          style={{
            width: widthScreen * 0.95,
            height: heightScreen * 0.2,
            borderRadius: 25,
          }}>
          <View style={{flexDirection: 'row', marginTop: -widthScreen * 0.015}}>
            <Image
              source={{uri: img}}
              style={{
                width: widthScreen * 0.1,
                height: widthScreen * 0.1,
                marginLeft: widthScreen * 0.07,
                marginTop: widthScreen * 0.09,
                borderRadius: (widthScreen * 0.13) / 2,
              }}
            />
            <Text
              style={{
                ...styles1.white30,
                marginTop: widthScreen * 0.1,
                marginLeft: 10,
              }}>
              {title}
            </Text>
          </View>
          <Text
            style={{
              ...styles1.white18,
              width: widthScreen * 0.85,
              marginLeft: widthScreen * 0.0675,
              marginTop: widthScreen * 0.05,
            }}>
            {desc}
          </Text>
        </ImageBackground>
      </TouchableOpacity>
    );
  }
}

const iconStyles = StyleSheet.create({
  forward: {
    width: heightScreen * 0.0123,
    height: heightScreen * 0.0215,
    marginRight: heightScreen * 0.03,
    marginTop: heightScreen * 0.005,
  },
});
const styles1 = StyleSheet.create({
  containerStyle: {
    width: widthScreen,
    height: heightScreen,
    backgroundColor: '#F3F7FA',
  },
  titleViewStyle: {
    backgroundColor: '#FFFFFF',
    height: 58,
  },
  titleTextStyle: {
    textAlign: 'center',
    width: widthScreen,
    top: 20,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: 14,
  },
  scrollStyle: {
    backgroundColor: '#F3F7FA',
  },
  abortHGBCStyle: {
    width: widthScreen,
    height: 300,
    backgroundColor: '#FFFFFF',
    marginTop: 10,
    alignItems: 'center',
  },
  peopleListRowStyle: {
    width: widthScreen,
    height: 199.5,
    backgroundColor: '#FFFFFF',
    marginTop: 12,
    justifyContent: 'space-between',
  },
  lankStyle: {
    width: widthScreen,
    height: 300,
    backgroundColor: '#FFFFFF',
    marginTop: 12,
  },
  bluepointStyle: {
    marginTop: heightScreen * 0.004,
    width: widthScreen * 0.013,
    height: heightScreen * 0.024,
    marginLeft: heightScreen * 0.03,
    backgroundColor: '#2672C0',
  },
  subtitleStyle: {
    color: '#333333',
    marginLeft: heightScreen * 0.008,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.022,
  },
  squarePeopleStyle: {
    width: 70,
    height: 75,
    backgroundColor: '#E5E5E5',
    borderRadius: 5,
  },
  peopleNameStyle: {
    width: 70,
    textAlign: 'center',
    marginTop: 12,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    color: '#656565',
    fontSize: 13,
  },
  moreStyle: {
    //width: 295,
    textAlign: 'right',
    marginTop: 4,
    marginRight: 20,
    //fontFamily: 'MicrosoftYaHei',
    color: '#989898',
    fontSize: 12,
  },
  white18: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.02,
    color: '#FFFFFF',
  },
  white22: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.022,
    color: '#FFFFFF',
  },
  white30: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.03,
    color: '#FFFFFF',
  },
  black20: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.021,
    color: '#333333',
    marginLeft: heightScreen * 0.027,
  },
  orange20: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.021,
    color: '#FE7241',
  },
  gray15: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.015,
    marginTop: heightScreen * 0.007,
    color: '#989898',
  },
  gray20: {
    marginTop: heightScreen * 0.014,
    marginLeft: heightScreen * 0.027,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.02,
    color: '#989898',
  },
});
const lineStyle = StyleSheet.create({
  Middle: {
    width: widthScreen * 0.667,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  Middle2: {
    width: widthScreen * 0.792,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  Long: {
    width: widthScreen * 0.84,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  longest: {
    width: widthScreen,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
});
